<template>
  <div class="content-body">
    <ul class="tab-content">
      <li class="tab-head-title">已选列表</li>
      <li class="tab-col-content">
        <ul class="tab-col-ul">
          <li class="tab-col tab-title">
            <div class="paper_name1">名称</div>
            <div>类型</div>
            <div>提供者</div>
            <div>创建时间</div>
            <div>最后修改时间</div>
            <div>操作</div>
          </li>
          <li v-for="(v,i) in checkPaperList" :key="i" class="tab-col">
            <div class="paper_name"><div style="margin-left:20px;text-align: left;border:none">{{ v.group_name }}</div></div>
            <div>{{ v.paper_type == 1 ? '试卷类型' : '问卷类型' }}</div>
            <div>{{ v.createor_name }}</div>
            <div><i class="el-icon-time" />{{ v.create_time }}</div>
            <div><i class="el-icon-time" />{{ v.update_time }}</div>
            <div class="tab-operator">
              <!-- <span>预览</span> -->
              <span @click="cancelSelectItem(v,i)">取消选择</span>
            </div>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="tab-content old-tab">
      <li class="tab-head-title">问卷列表</li>
      <li class="tab-col tab-title">
        <div class="paper_name1">名称</div>
        <div>类型</div>
        <div>提供者</div>
        <div>创建时间</div>
        <div>最后修改时间</div>
        <div>操作</div>
      </li>
      <li v-for="(v,i) in paperList" :key="i" class="tab-col">
        <div class="paper_name"><div style="margin-left:20px;text-align: left;border:none">{{ v.group_name }}</div></div>
        <div>{{ v.paper_type == 1 ? '试卷类型' : '问卷类型' }}</div>
        <div>{{ v.createor_name }}</div>
        <div><i class="el-icon-time" />{{ v.create_time }}</div>
        <div><i class="el-icon-time" />{{ v.update_time }}</div>
        <div class="tab-operator">
          <span @click="yuLang(v)">预览</span>
          <span :class="v.isCheck? 'isCheck' : ''" @click="selectItem(v,i)">{{ v|capitalize }}</span>
        </div>
      </li>
      <li class="page-helper">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </li>
    </ul>
    <div class="succseBtn">
      <el-button type="primary" @click="toSuccse">完成</el-button>
    </div>
    <!-- 预览 -->
    <el-dialog
      title="预览"
      :visible.sync="yulangDialogVisible"
      width="450px"
      :before-close="handleClose"
      class="noPaddingDialog"
      top="20px"
    >
      <div class="phoneBox">
        <Phone v-if="yulangDialogVisible" :show_url="showUrl" :zhu-jiuan="true" :ischangebtn="false" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="yulangDialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
    getGroup
} from '@/api/question'
import {
    addSelectPaper
} from '@/api/paper'
import Phone from '@/components/Phone'
const Global = require('../../../env/index')

var That = null
export default {
    components: {
        Phone
    },
    filters: {
        capitalize: function(value) {
            var isIn = '选择'
            That.checkPaperList.forEach(el => {
                if (el.unid === value.unid) {
                    isIn = '已选择'
                }
            })
            return isIn
        }
    },
    props: ['paperData'],
    data() {
        return {
            currentPage: 1,
            total: 0,
            checkPaperList: [],
            paperList: [],
            yulangDialogVisible: false, // 预览
            showUrl: '' // 预览
        }
    },
    watch: {
        paperData(curVal, oldVal) {
            console.log('传参', this.paperData)
        }
    },
    created() {
        That = this
        this.getList()
    },
    methods: {
        handleClose(done) {
            done()
        },
        yuLang(row) {
            this.showUrl = `${Global.ifram_url}?psq_test_id=${row.unid}&link_type=search&page_type=2`
            this.yulangDialogVisible = true
        },
        toSuccse() {
            if (this.checkPaperList.length === 0) {
                return this.$message({
                    message: '请选择问卷',
                    type: 'warning'
                })
            }
            var groupArr = []
            this.checkPaperList.forEach(el => {
                groupArr.push(el.unid)
            })
            console.log({
                zoom_id: this.paperData.unid,
                group: groupArr
            })
            addSelectPaper({
                zoom_id: this.paperData.unid,
                group: groupArr
            }).then(res => {
                console.log(res)
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        customClass: 'customClass',
                        message: '创建成功!'
                    })
                    this.$store.dispatch('tagsView/delView', this.$route)
                    this.$router.replace('/intelligentTest/organizingPapers')
                }
            })
        },
        getList() {
            getGroup({
                limit: 5,
                page: this.currentPage
            }).then(res => {
                if (res.code === 200) {
                    this.paperList = res.data.list
                    this.total = res.data.total
                    if (this.paperData.group && this.paperData.group.length != 0) {
                        this.checkPaperList = this.paperData.group
                    }
                }
            })
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getList()
        },
        selectItem(item, index) {
            console.log(item)
            var isIn = false
            this.checkPaperList.forEach(el => {
                if (el.unid === item.unid) {
                    isIn = true
                }
            })
            if (!isIn) {
                this.checkPaperList.push(item)
            } else {
                this.$message({
                    message: '已选择该问卷',
                    type: 'warning'
                })
            }
        },
        cancelSelectItem(item, index) {
            this.checkPaperList.splice(index, 1)
        }

    }
}
</script>

<style>
  .content-body {}

  .isCheck {
    color: #F56C6C!important;
  }

  .tab-content {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-right: 1px solid #ebeef5;
  }

  .tab-head-title {
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    height: 40px;
    line-height: 40px;
    padding-left: 30px;
  }

  .tab-col {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .tab-title {
    text-align: center;
  }

  .tab-col div {
    flex: 1;
    line-height: 40px;
    height: 40px;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }

  .tab-col .paper_name {
    flex: 3;
    text-align: left;
    box-sizing: border-box;
  }
   .tab-col .paper_name1 {
    flex: 3;
  }

  .tab-operator {
    display: flex;
    justify-content: space-around;
  }

  .tab-col-content {
    max-height: 280px;
    overflow-y: auto;
    border-bottom: 1px solid #ebeef5;
  }

  .tab-col-ul {
    padding-inline-start: 0;
  }

  .tab-operator span {
    cursor: pointer;
    color: #00ACFE;
  }

  .tab-operator span:hover {
    color: #00D5A2;
  }

  .page-helper {
    border: 1px solid #ebeef5;
    padding: 10px 0;
  }

  .old-tab {
    margin-top: 50px;
  }

  .succseBtn {
      margin-top: 20px;
      width: 100%;
      text-align: right;
  }
  .phoneBox {
    width: 100%;
    display: flex;
    justify-content: center;
}
</style>
